<template>
  <div id="aCoursesList" class="bg-fa of">
    <!-- 讲师列表 开始 -->
    <section class="container">
      <header class="comm-title">
        <h2 class="fl tac">
          <span class="c-333">名师团队</span>
        </h2>
      </header>
      <section class="c-sort-box unBr">
        <div>
          <!-- /无数据提示 开始-->
          <!--
              if判断：
              !teachers：表示teachers数据不存在
          -->
          <section v-if="!teachers || teachers.length===0" class="no-data-wrap">
            <em class="icon30 no-data-ico">&nbsp;</em>
            <span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</span>
          </section>
          <!-- /无数据提示 结束-->

          <!-- /数据列表 开始-->
          <article class="i-teacher-list">
            <ul class="of">
              <!-- 遍历讲师列表 -->
              <li v-for="teacher in teachers" :key="teacher.id">
                <section class="i-teach-wrap">
                  <div class="i-teach-pic">
                    <a :title="teacher.name" :href="'/teacher/'+teacher.id">
                      <img v-if="teacher.avatar" :alt="teacher.name" :src="teacher.avatar" width="142">
                      <img v-else :alt="teacher.name" src="https://guli-file-austin.oss-cn-shanghai.aliyuncs.com/avatar/2021/02/01/2020-2-13%2084826%202.jpg" width="142">
                    </a>
                  </div>
                  <div class="mt10 hLh30 txtOf tac">
                    <a :href="'/teacher/'+teacher.id" :title="teacher.name" class="fsize18 c-666">{{ teacher.name }}</a>
                  </div>
                  <div class="hLh30 txtOf tac">
                    <span v-if="teacher.level===0" class="fsize14 c-999">尚硅谷高级讲师</span>
                    <span v-if="teacher.level===1" class="fsize14 c-999">尚硅谷首席讲师</span>
                    <span v-else class="fsize14 c-999">尚硅谷教学总监</span>
                  </div>
                  <div class="mt15 i-q-txt">
                    <!-- teacher.intro是讲师简介 -->
                    <p class="c-999 f-fA">{{ teacher.intro }}</p>
                  </div>
                </section>
              </li>
            </ul>
            <div class="clear"/>
          </article>
          <!-- /数据列表 结束-->
        </div>
      </section>
      <!-- 测试Vue自己的data数据显示：{{ test }} -->
    </section>
    <!-- /讲师列表 结束 -->
  </div>
</template>
<script>
// 引入teacher.js
import teacherApi from '~/api/teacher'
export default {
  // 1、异步获取数据：客户端渲染
  /*
  data() {
    return {
      teachers: []
    }
  },
  created() {
    this.getTeachers()
  },
  methods: {
    // 查询讲师列表
    getTeachers() {
      teacherApi.getTeacherList().then(response => {
        console.log(response)
        this.teachers = response.data.items
      })
    }
  }
  */

  // 2、异步获取数据：服务器渲染
  /*
  asyncData() {

    nuxt整合vue：(了解)
    修改了data方式，nuxt可以通过自己的方法，编写发起异步请求的代码，
    当由请求访问当前页面时，nuxt会将该方法执行并将方法的返回值结果合并到vue的data中
    也就是
    之前vue是在data中将数据渲染到div容器中
    nuxt在asyncData()函数里面，第二次return，
    直接将返回值结果合并到vue的data，渲染到div容器中

    return teacherApi.getTeacherList().then(response => {
      return {
        teachers: response.data.items
      }
    })
  },

  data() {
    return {

       这里的数据最后会和asyncData中的数据定义合并
       也就是说，这里面的数据，是Vue自己的data数据，通过{{ test }}，也可以渲染到页面中
       而nuxt的asyncData()中的数据，return的teachers，也会合并到vue的data中
       渲染到页面
       也就是说，在nuxt中，没有必要在单独写data(){}进行数据绑定了
       （1）客户端渲染：是浏览器向前端发送查询所有讲师列表的请求，得到一个页面，解析页面中js代码
                       然后浏览器自己向后端服务器发送异步请求，通过Vue渲染响应数据，显示到页面中
       （2）服务器渲染：是异步请求的代码，已经在前端所运行的服务器中提前执行，将结果渲染到页面中
                       然后再把整个页面，交给浏览器进行显示

      test: '测试显示，Vue自己的数据'
    }
  }
  */

  // 3、异步获取数据：服务器渲染【使用 async 和 await 关键字，进行同步调用】【异步请求，同步调用】
  async asyncData() {
    const response = await teacherApi.getTeacherList()
    console.log(response)
    /*
    之前需要等到异步请求发送成功，才能对响应数据进行return【也就是在then里面进行return】
    但是现在是await teacherApi.getTeacherList()变成了同步
    代码会一行一行往下执行
    需要等到await teacherApi.getTeacherList()方法执行结束
    拿到结果，才能进行return
    */
    return {
      teachers: response.data.items
    }
  }
}
</script>
